<template>
    <div class="offer">
        <div class="topImg">
            <img :src="result.basc.ad.photo" />
            <div class="swiperbg"></div>
        </div>
        <div class="offerWrap" style="padding:20px 0;">
            <div class="sectionTitle">
                <div class="name">{{result.basc.nav&&result.basc.nav[5].name}}</div>
                <p class="sname">{{result.basc.nav&&result.basc.nav[5].en_name}}</p>
                <p class="dian"><span></span></p>
            </div>

            <div class="showPrice">
                <img src="../assets/q.png" alt="" />
                <span>{{price.one}}</span>
                <span v-if="price.one!='--'">-</span>
                <span>{{price.two}}</span>
            </div>

            <div class="tipstext">
                <p>根据您提交的需求，计算您大致的拍片价格</p>
                <p>如需专业帮助，请联系在线客服</p>
            </div>

            <div class="forms">
                <div class="form">
                    <div class="form-control">
                        <label>视频类型</label>
                        <div class="form-input">
                            <popup-picker value-text-align="left" popup-title="视频类型" :data="videoTypeArr" v-model="videoTypeVal">
                            </popup-picker>
                        </div>
                    </div>
                    <div class="form-control">
                        <label>视频时长</label>
                        <div class="form-input">
                            <popup-picker value-text-align="left" popup-title="视频时长" :data="videoTimeArr" v-model="videoTimeVal">
                            </popup-picker>
                        </div>
                    </div>
                    <div class="form-control">
                        <label>演员需求</label>
                        <div class="form-input">
                            <popup-picker value-text-align="left" popup-title="演员需求" :data="videoActorArr" v-model="videoActorVal">
                            </popup-picker>
                        </div>
                    </div>
                    <div class="form-control">
                        <label>实拍需求</label>
                        <div class="form-input">
                            <popup-picker value-text-align="left" popup-title="实拍需求" :data="videoLiveArr" v-model="videoLiveVal">
                            </popup-picker>
                        </div>
                    </div>
                    <div class="form-control">
                        <label>手机号码</label>
                        <div class="form-input notBorder">
                            <flexbox>
                                <flexbox-item :span="6/10">
                                    <x-input class="inputs" v-model="vals" :value="vals" type="number"></x-input>
                                </flexbox-item>
                                <flexbox-item :span="4/10">
                                    <x-button :text="btnText" @click.native="getCode" :disabled="disabled" :show-loading="loading"></x-button>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </div>
                    <div class="form-control">
                        <label>验证码</label>
                        <div class="form-input notBorder">
                            <flexbox>
                                <flexbox-item >
                                    <x-input class="inputs" v-model="code" :value="code" type="number"></x-input>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </div>
                </div>

                <div class="saveBtnWrap">
                    <x-button text="获取报价" @click.native="getPrice"></x-button>
                </div>

            </div>


        </div>
        <footers :basc="result.basc"></footers>
        <toast v-model="vtoast" :type="vtype" :time="1500" :text="toastText" :position="position">11</toast>
    </div>




</template>
<script>
import {PopupPicker, Flexbox, FlexboxItem,XInput, XButton, Toast} from 'vux'
import Footers from './Footer'
export default {
    name:"Offer",
    components:{
        PopupPicker,
        Flexbox, FlexboxItem,XInput, XButton,
        Footers, Toast
    },
    data:()=>{
        return {
            videoTypeArr:[["广告片","产品专题片","微电影","宣传片"]],
            videoTypeVal:["宣传片"],
            videoTimeArr:[["5-10分钟", "3-5分钟", "1-3分钟"]],
            videoTimeVal:["3-5分钟"],
            videoActorArr:[["专业演员", "普通演员", "无需演员"]],
            videoActorVal:["无需演员"],
            videoLiveArr:[["无实拍", "有实拍"]],
            videoLiveVal:["有实拍"],
            result:{basc:{web_logo:'',ad:{photo:''}}},
            loading:false,
            disabled:false,
            btnText:'获取验证码',
            vals:'',
            code:'',
            vtoast:false,
            vtype:'success',
            position:'center',
            toastText:'',
            price:{
                one:'--',
                two:'--'
            }
        }
    },
    created(){
        setTimeout(()=>{
            this.$emit('scrollsTop');
        }, 1000);
        this.Query('offer').then(result => {
            this.result = result;
        }).catch(os =>{
            console.log('错误');
        });
    },
    methods:{
        getCode(){
            if( this.vals == '' ){
                this.vtoast = true;
                this.vtype = 'cancel';
                this.toastText = "请输入手机号码"
                return ;
            }
            if( /^1[0-9]{10}$/.test(this.vals) ){
                this.Query('send_msg', {mobile:this.vals}).then(result=>{
                    this.vtoast = true;
                    this.toastText = "发送成功";
                    this.vtype = 'success';
                    this.loading = true;
                    this.disabled = true;
                    this.orderTime();
                }).catch(err=>{
                    this.vtoast = true;
                    this.vtype = 'cancel';
                    this.toastText = "发送失败";
                });
            }else{
                this.vtoast = true;
                this.vtype = 'cancel';
                this.toastText = "手机不正确"
                return ;
            }
        },
        orderTime(){
            let time = 90;
            let timeBi = null;
            timeBi = setInterval(()=>{
                if( time < 1 ){
                    clearInterval(timeBi);
                    this.loading = false;
                    this.disabled = false;
                    this.btnText = '再次获取';
                }else{
                    --time;
                    this.btnText = time + 's';
                }
            }, 1000);
        },
        getPrice(){
            if( /^1[0-9]{10}$/.test(this.vals) || this.code != '' ){

                let send = {
                    mobile:this.vals,
                    code:this.code
                };
                send['video_type'] = this.videoTypeVal[0];
                send['video_time'] = this.videoTimeVal[0];
                send['video_need'] = this.videoActorVal[0];
                send['video_npo'] = this.videoLiveVal[0];

                this.Query('selectprice', send).then(result => {
                    this.vtoast = true;
                    this.toastText = "查询成功";
                    this.price.one = result.one + '万';
                    this.price.two = result.two + '万';
                }).catch(os =>{
                    console.log('错误');
                });

            }else{
                this.vtoast = true;
                this.vtype = 'cancel';
                this.toastText = "手机或验证码错误"
                return ;
            }
        }
    }
}
</script>

<style lang="css">
</style>
